<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    #box {
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>

<body>

    <div id="box"></div>

</body>

<!-- js中的this -->

<!-- 1.一般方法中 this代指全局对象window -->

<!-- 2.作为对象方法的调用 this代指当前对象 -->

<!-- 3.作为构造函数调用 this代指new出的对象 -->
<script>
    // 需求1 点击div 2s后 颜色变为粉色

    let ad = document.getElementById('box')
    ad.addEventListener('click', function () {
        console.log(this) //this指向ad
        let _this = this

        // setTimeout(() => {
        //     console.log(this) this指向的是ad
        // }, 2000)

        // setTimeout(function () {
        //     console.log(_this) //this指向window
        // }, 2000)
    })


    // 需求2 从数组中返回偶数
    const arr = [1, 6, 9, 10, 100, 25]

    // filter()方法会创建一个新数组，原数组的每个元素传入回调函数中，回调函数中有return返回值，若返回值为true，这个元素保存到新数组中；若返回值为false，则该元素不保存到新数组中；原数组不发生改变。
    // const result = arr.filter(item => {
    //     if (item % 2 == 0) {
    //         return true
    //     } else {
    //         return false

    //     }
    // })
    const result = arr.filter(item => item % 2 == 0)
    console.log(result)

    /* 1.适用场景 适合与this无关的回调 定时器 数组的回调
                不适合与this有关的回调 */
</script>

</html>